<template>
    <div class="cart-list">
        <van-empty
            image="https://fastly.jsdelivr.net/npm/@vant/assets/custom-empty-image.png"
            image-size="120"
            description="购物车为空, 请选购商品"
            v-if="paid.length === 0"
        />
    </div>

    <div class="menu-list">
        <div v-for="item in paid" :key="item.id">
            <div class="time">
                <span></span>
                <span
                    >等待提货&nbsp;&nbsp;|&nbsp;&nbsp;<van-icon
                        name="delete-o"
                        @click="deleteGoods(item.id)"
                /></span>
            </div>
            <div @click="todetail(item.id)">
                <!-- num="2"
                desc="02月10日提货" -->
                <van-card
                    :price="item.price"
                    :title="item.shop"
                    :thumb="item.picture"
                >
                    <template #num>
                        <van-button
                            round
                            color="#ED0D5B"
                            plain
                            size="small"
                            type="danger"
                            @click="comment(item.id)"
                            >确认提货</van-button
                        >
                    </template>
                    <template #desc>
                        订单编号：{{ item.number }} <br />
                        <span>订单内容:{{}}</span>
                        交易金额： ￥{{ item.total_price }} <br />
                        交易时间: {{ item.date }}
                    </template>
                </van-card>
            </div>
            <hr />
        </div>
    </div>
</template>

<script setup lang="ts">
import { usePyStore } from '@/stores/pyok'
import { type Ref, ref, onMounted } from 'vue'
import { useCartStore } from '@/stores/cart'
import { Toast } from 'vant'
import { useRouter } from 'vue-router'
import { useAccountStore } from '@/stores/user'
import axios from 'axios'
const accountStore = useAccountStore()

const comment = (id) => {
    router.push({ path: '/comment', query: { id } })
}

onMounted(() => {
    getAllOrder()
})
// 获取所有订单列表
const getAllOrder = async () => {
    const data = await axios({
        method: 'get',
        url: 'http://localhost:3000/goods/allorder',
        //post请求参数使用data选项, get参数 params选项
    })
    const { code, info } = data.data
    if (code === 1) {
        // accountStore.account
        paid.value = info.list.filter(item => {
            if (item.user == accountStore.account.username && item.order_state == 1) return item
        })
        console.log(paid.value)
    } else {
        Toast('erro')
    }
}

const router = useRouter()
const usepyok = usePyStore()
const useCart = useCartStore()

const paid: Ref<Array<any>> = ref([])
// 遍历对象 返回一个新的数组
// paid.value = usepyok.list.map(item=>item)

// 删除
const deleteGoods = (id: number) => {
    const index = paid.value.findIndex(item => item.id == id)
    paid.value.splice(index, 1)
    console.log(paid.value)
}
// 确认提货
const buytoo = async (id: any) => {
    console.log(id)
    const res = await axios({
        method: 'post',
        url: 'http://localhost:3000/goods/confirmorder',
        //post请求参数使用data选项, get参数 params选项
        data:{
            order_state:'2',
            id
        }
    })
    getAllOrder()
    // useCart.saveCart(item)
    // Toast('加入购物车成功')
}
// 商品详情
const todetail = (id: number) => {
    // router.push({ path: '/detail', query: { id } })
}
</script>

<style scoped lang="scss">
.cart-list {
    width: 100%;
    background-color: #ffffff;

    img {
        margin: 5% 5%;
        width: 90%;
        height: 90%;
    }

    .van-button {
        margin: 0 8%;
        width: 80%;
    }
}
.menu-list {
    width: 100%;
    display: flex;
    justify-content: space-around;
    flex-direction: column;

    .time {
        padding: 5px 24px 5px 24px;
        display: flex;
        justify-content: space-between;
        background-color: #ffffff;
    }

    .time2 {
        padding: 5px 24px 5px 24px;
        display: flex;
        justify-content: space-between;
        background-color: #ffffff;

        .redsapn {
            color: red;
        }
    }
    .van-button {
        float: right;
    }
}
</style>
